<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import { delSpecial } from '@/api/recive/specialdel'
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";

const defaultForm = {
  courierNumber: "",
  userName: "",
  type: "",
  companyId: "",
  remarks: "",
};

export default {
  name: "specialdel",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      requestConfig: {
        url: "/base/manageSpecialDelivery/querySpecialDelivery",
        method: "get",
        montage: true,
      },
      setRequest: {
        url: "/base/manageSpecialDelivery/updateSpecialDelivery",
        method: "put",
        montage: false,
      },
      addRequest: {
        url: "/base/manageSpecialDelivery/addSpecialDelivery",
        method: "put",
        montage: false,
      },
      selectionArr: [], // 多选框内容
    };
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    formBase() {
      return formBase;
    },
    // 导出
    async downLoad() {
      if (this.selectionArr.length > 0) {
        // 查找快递公司
        const data = this.selectionArr.map(item => {
          return item.id
        })

        this.download( "/base/manageSpecialDelivery/exportSpecialDelivery", { ids: data }, `specialize_${new Date().getTime()}.xlsx`)
      } else {
        this.$message.error("请选择条数据导出");
      }
    },

    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    // 删除
    del(data) {
      console.log(data)
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSpecial(data.id).then(res => {
          this.$message.success('删除成功!')
          this.$refs.table.getListData()
        })
      })
    }
  },
};
</script>

<template>
  <div>
    <div class="mb-3">
      <dmb-form
        ref="form"
        :form-items="formBase()"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
        @update="(row) => propsSearchForm = row"
        class="mt-3"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <div>
      <dmb-table
        ref="table"
        :prop-list="tableBase()"
        :operate-wether="true"
        :is-operate="true"
        :show-index-column="true"
        select-column-type="RADIO"
        :props-search-form="propsSearchForm"
        :req-request="requestConfig"
        :set-request="setRequest"
        :add-request="addRequest"
        select-key="id"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
        :initialize="false"
        :change-search-form="false"
        :show-footer="true"
        :form-item-style="tableFormStyle"
        @selectionChange="
          (row) => {
            selectionArr = row;
          }
        "
      >
        <template v-slot:operate="{ row }">
          <el-button type="danger" @click="del(row)">删除</el-button>
        </template>
      </dmb-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
